<template>
  <div class="newMaxLength">
    <span v-if="textMax&&textMax.length<textNumber"
          class="moRed">
      <p slot=" "></p>
      {{textMax}}
      <p slot="bottom"></p>
    </span>
    <el-popover v-if="textMax&&textMax.length>=textNumber"
                placement="top-start"
                :width="calcWrapWidth||200"
                trigger="hover"
                :content="getResTxt((textMax), true,textNumber)">
      <span slot="reference"
            class="moRed">
        {{getResTxt(textMax, false,textNumber)}}
        <span class="c-main">...更多</span>
      </span>
    </el-popover>
  </div>
</template>

<script>
export default {
  props: {
    textMax: {
      type: String,
      required: '',
      default: ''
    },
    textNumber: {
      type: Number,
      required: true,
      default: 10
    },
    calcWrapWidth: {
      type: Number,
      required: true,
      default: 200
    }
  },
  data () {
    return {

    }
  },
  methods: {
    getColorClass (data) {
      if (this.colorList) {
        const itemCur = this.colorList.find(item => item.val === data)
        return itemCur && itemCur.color
      } else if (this.classList) {
        let classObj = {}
        for (let i in this.classList) {
          classObj[this.classList[i]] = this.classList[i]
        }
        return classObj
      }
      return ''
    },
    getResTxt (data, isGetAll = true, maxLength) {
      let res = data
      this.resAllTxt = res
      if (!isGetAll && res && res.length > maxLength) {
        return res.slice(0, maxLength)
      } else {
        return res
      }
    }
  }
}
</script>

<style>
</style>